<template>
	<div>
		<!-- 头部区域 -->
		<header class="header">传智后台管理系统</header>
		<!-- 中间主体区域 -->
		<div class="main">
			<!-- 左侧菜单栏 -->
			<div class="content left">
				<ul>
					<li><router-link to="/user">用户管理</router-link></li>
					<li><router-link to="/authority">权限管理</router-link></li>
					<li><router-link to="/shop">商品管理</router-link></li>
					<li><router-link to="/indent">订单管理</router-link></li>
					<li><router-link to="/system">系统设置</router-link></li>
				</ul>
			</div>
			<!-- 右侧内容区域 -->
			<div class="content right">
				<!-- 字路由规则的路由占位符 -->
				<router-view />
			</div>
		</div>
		<!-- 尾部区域 -->
		<footer class="footer">版权信息</footer>
	</div>
</template>

<script>
</script>

<style>
	html,
	body,
	#app {
		margin: 0;
		padding: 0px;
		height: 100%;
	}

	.header {
		height: 50px;
		background-color: #545c64;
		line-height: 50px;
		text-align: center;
		font-size: 24px;
		color: #fff;
	}

	.footer {
		height: 40px;
		line-height: 40px;
		background-color: #888;
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #fff;
	}

	.main {
		display: flex;
		position: absolute;
		top: 50px;
		bottom: 40px;
		width: 100%;
	}

	.content {
		flex: 1;
		text-align: center;
		height: 100%;
	}

	.left {
		flex: 0 0 20%;
		background-color: #545c64;
	}

	.left a {
		color: white;
		text-decoration: none;
	}

	.right {
		margin: 5px;
	}

	.btns {
		width: 100%;
		height: 35px;
		line-height: 35px;
		background-color: #f5f5f5;
		text-align: left;
		padding-left: 10px;
		box-sizing: border-box;
	}

	button {
		height: 30px;
		background-color: #ecf5ff;
		border: 1px solid lightskyblue;
		font-size: 12px;
		padding: 0 20px;
	}

	.main-content {
		margin-top: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	ul li {
		height: 45px;
		line-height: 45px;
		background-color: #a0a0a0;
		color: #fff;
		cursor: pointer;
		border-bottom: 1px solid #fff;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	td,
	th {
		border: 1px solid #eee;
		line-height: 35px;
		font-size: 12px;
	}

	th {
		background-color: #ddd;
	}
</style>
